<template>
    <div class="container">
        <div id="map"></div>
    </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css'
import mapboxgl from 'mapbox-gl' // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: 'Vue2MapboxMapTemplate',
  data () {
    return {}
  },

  mounted () {
    this.initMap()
  },

  methods: {
    initMap () {
      mapboxgl.accessToken =
                'pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A'
      const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z', // style URL
        // style: {}, // style URL
        // center: [-87.622088, 41.878781],
        center: [121.79013542048335, 32.05775855185749], // starting position [lng, lat]
        // center: mapboxgl.MercatorCoordinate.fromLngLat([118.79013542048335,32.05775855185749]), // starting position [lng, lat]
        zoom: 5 // starting zoom
        // projection: "mercator",
      })

      //
      map.on('click', (evt) => {
        console.log(evt.lngLat)
        const features = map.queryRenderedFeatures(evt.point)
        console.log(features[0])
      })

      map.on('load', (e) => {
        map.addLayer(
          {
            id: 'mapillary', // Layer ID
            type: 'line',
            source: {
              type: 'vector',
              tiles: [
                'http://218.2.210.142:8090/data-query/v1/tile/basemap/getMapTileByXYZ?x={x}&y={y}&z={z}'
              ]
              // 'minzoom': 6,
              // 'maxzoom': 14
            }, // ID of the tile source created above
            'source-layer': 'admin-3-boundary',
            layout: {
              // 'line-cap': 'round',
              // 'line-join': 'round'
              'text-field': '{code}'
            },
            paint: {
              'line-opacity': 0.9,
              'line-color': 'rgb(255, 0, 0)',
              'line-width': 1
            }
          }
        )

        map.addLayer(
          {
            id: 'admin-label', // Layer ID
            // 'type': 'line',
            type: 'fill',
            source: {
              type: 'vector',
              tiles: [
                'http://218.2.210.142:8090/data-query/v1/tile/basemap/getMapTileByXYZ?x={x}&y={y}&z={z}'
              ]
            },
            'source-layer': 'admin-label',
            layout: {
              // "text-field": "{name}",
              // 'text-field': ['get', 'name'],
            },
            paint: {
              // 'text-color': "#ff0000",
              // 'circle-color': '#ff0000',
              // 'circle-radius': 4,
              // 'circle-stroke-width': 1,
              // 'circle-stroke-color': '#fff'
              // 'line-color': 'rgb(255, 0, 0)',
              // 'line-width': 1,

              'line-color': 'rgb(255, 0, 0)'
            }
          }
        )

        map.on('click', (e) => {
        //   const bbox = [
        //     [e.point.x - 5, e.point.y - 5],
        //     [e.point.x + 5, e.point.y + 5]
        //   ]
          // const selectedFeatures = map.queryRenderedFeatures(bbox, {
          //     layers: ['counties']
          // });
          // console.log(selectedFeatures, 'selectedFeatures=============');
        })
      })
    }
  }
}
</script>

<style></style>
